<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-事件冒泡 </title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div @click="write">
        <p @click="print">
             <button @click="show($event)">点我1</button>
            <button @click.stop="show">点我</button>
        </p>
    </div>
    <hr>

     <a href="#" @click="study($event)">俺是链接1</a>
    <a href="#" @click.prevent="study">俺是链接</a>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                msg: 'hello world'
            }
        },
        methods: {
            show(e) {
                console.log(111, 'show');
                e.stopPropagation();
            },
            print() {
                console.log(222, 'print');
            },
            write() {
                console.log(333, 'write');
            },
            study(e) {
                // console.log(444, 'study');
              e.preventDefault();
            }
        }
    })
</script>
</body>
</html>